<template>
	<el-dialog title="新增" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
		<el-form :model="form" :rules="rules" ref="form" v-if="cleardata">
			<el-form-item label="农产品名" :label-width="formLabelWidth" prop="farmName">
				<el-input v-model="form.farmName" style="width: 20%;" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="农产品图片" :label-width="formLabelWidth" prop="shopPicture">
				<el-upload class="orders-img_el_upload" :action="upurl" :limit="3" list-type="picture-card"
					:on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove"
					:on-success="handleSuccess" :on-error="handleError" :file-list="fileList"
					:class="{ disUoloadSty: noneBtnImg }" ref="upload">
					<span class="orders-img_el_upload_btn" @click.stop="submitUpload">添加图片</span>
				</el-upload>
			</el-form-item>
			<el-form-item label="类别" :label-width="formLabelWidth" prop="sortId">
				<el-select v-model="form.sortId" placeholder="请选择">
					<el-option v-for="item in sortData" :key="item.value" :label="item.text"
						:value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态" :label-width="formLabelWidth" prop="status">
				<el-select v-model="form.status" placeholder="请选择">
					<el-option v-for="item in statusist" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="规格" :label-width="formLabelWidth">
				<el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addInputs"></el-button>
				<div class="inputs" v-for="(inputsGroup, index) in inputsGroups" :key="index">
					<el-input placeholder="规格名" v-model="inputsGroup.znSpecTitle" clearable style="width: 13%;"></el-input>
					<div>—</div>
					<el-input placeholder="计量单位" v-model="inputsGroup.znSpecUnit" clearable style="width: 13%"></el-input>
					<div>—</div>
					<el-input placeholder="价格" v-model="inputsGroup.znSpecPrice" clearable style="width: 13%"></el-input>
					<div>—</div>
					<el-input placeholder="库存" v-model="inputsGroup.inventory" clearable style="width: 13%"></el-input>
					<el-button type="danger" icon="el-icon-minus" circle size="mini"
						@click="removeInputs(index)"></el-button>
				</div>
				<!-- <el-button @click="sss">提交</el-button> -->
			</el-form-item>
			<el-form-item label="描述" :label-width="formLabelWidth" prop="farmIntro">
				<el-input v-model="form.farmIntro" type="textarea"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cleardata">取 消</el-button>
			<el-button type="primary" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import farmApi from "@/api/farm.js"
	import sortApi from "@/api/sort.js"
	export default {
		components: {

		},
		props: {

		},
		data() {
			return {
				inputsGroups: [{
					znSpecTitle: '',
					znSpecUnit: '',
					znSpecPrice: '',
					inventory: ''
				}],
				sortData: [], //分类数组
				dialogImageUrl: "",
				dialogVisible: false,
				showBtnImg: true,
				noneBtnImg: false,
				limitCountImg: 3,
				upurl: "/api/file/upload/farm",
				fileList: [], // 存储已选择的文件列表
				imgurl: "",
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					farmName: "",
					farmIntro: "",
					sortId: "",
					status: "",
					shopPicture: "",
				},
				statusist: [{
						value: "0",
						label: '下架',
					},
					{
						value: "1",
						label: '上架',
					}
				],
				rules: {
					farmName: [{
						required: true,
						message: "请输入农产品名",
						trigger: 'blur'
					}],
					farmIntro: [{
						required: true,
						message: "请输入农产品描述",
						trigger: 'blur'
					}],
					sortId: [{
						required: true,
						message: "请选择农产品类别",
						trigger: 'change'
					}],
					status: [{
						required: true,
						message: "请输入农产品状态",
						trigger: 'blur'
					}],
					shopPicture: [{
						required: true,
						message: "请上传农产品图片",
						trigger: 'change'
					}],
				},
				formLabelWidth: '120px'
			};
		},
		methods: {
			addInputs() {
				this.inputsGroups.push({});
			},
			removeInputs(index) {
				this.inputsGroups.splice(index, 1);
			},
			handleError(err, file, fileList) {
				this.$message({
					message: "上传失败！",
					type: "error",
				});
				console.log(err);
			},
			sss() {
				const inputData = this.inputsGroups;
				console.log(inputData)
				this.inputsGroups = [];
			},
			handleSuccess(res, file, fileList) {
				console.log(res)
				console.log(fileList)
				if (res.code == 200) {
					this.fileList = fileList;
					this.form.shopPicture = res.data;
					if (fileList.length >= 7) {
						this.uploadDisabled = true;
					}
					alert(res.message);
				} else {
					alert(res.data);
				}
			},
			handleChange(file, fileList) {
				this.noneBtnImg = fileList.length >= this.limitCountImg;
			},
			handleRemove(file, fileList) {
				this.noneBtnImg = fileList.length >= this.limitCountImg;
				this.fileList.pop();
				this.uploadDisabled = false;
			},
			handlePreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			async addFarm() {
				let date = {
					farmName: this.form.farmName,
					price: this.form.price,
					farmIntro: this.form.farmIntro,
					sortId: this.form.sortId,
					status: this.form.status,
					shopPicture: this.form.shopPicture,
					specificationBeans : this.inputsGroups
				}
				const res = await farmApi.AddFarm("/znFarmproduce/addFarm",date );
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.$message.success("添加成功");
					this.$parent.FarmAll();
				}
			},
			// async queryAllSort() { //查询分类
			// 	const res = await sortApi.queryAllSort("/znSort/queryAllSort");
			// 	if (res.code == 200) {
			// 		this.sortData = res.data;
			// 	}
			// },
			cleardata() {
				this.dialogFormVisible = false;
				this.$refs.form.resetFields();
			},
			handleDialogClose() {
				this.dialogFormVisible = false;
				this.$refs.form.resetFields();
			},
			submitForm(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						this.addFarm();
						this.$refs.form.resetFields();
						this.inputsGroups = [];
						this.fileList = [];
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
		},
		created() {
			// this.queryAllSort();
		}

	};
</script>

<style lang="scss" scoped>
	.inputs{
		display: flex;
		align-items: baseline;
		.el-input{
			margin: 10px 0 0 0;
		}
		.el-button{
			margin-left: 20px;
		}
	}
</style>